<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">订单详情</block>
		</cu-custom>
		<loading-view v-if="showLoading"></loading-view>
		<view class="order-details" v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_a">
				<view>
				<view class="index_a_a">{{orderDetail.order_status_desc}}</view>
				<view class="index_a_b" v-if="orderDetail.order_status==0">
					<u-count-down :time="orderDetail.qx_time" format="HH:mm:ss" autoStart millisecond
						@finish="countDownFinish()" @change="onDownChange">
						<view class="order_details_a_b_a">
							<text class="order_details_a_b_a_a">请于</text>
							<text class="order_details_a_b_a_a">{{ timeData.minutes }}分</text>
							<text class="order_details_a_b_a_a">{{ timeData.seconds }}秒内付款，超时订单将自动关闭</text>
						</view>
					</u-count-down>
				</view>
				<view class="index_a_b" v-if="orderDetail.order_status==1">您的订单已支付成功，等待平台发货</view>
				</view>


				<view class="qrcodebox" @click="show = true" v-if="orderDetail.verification_status===0 && orderDetail.order_status===3">
					<image src="../../static/qrcode.png" style="width: 100%; height: 100%;" mode=""></image>

				</view>

				<u-popup :show="show" @close="close" @open="open" mode="center">
					<view style="margin: 126rpx 200rpx 0 199rpx;">
						核销码
					</view>
					<view style="width: 186rpx; height: 185rpx;margin: 27rpx 0 170rpx 170rpx;">
						<view v-for="(row, rowI) in modules" :key="rowI" style="display: flex; flex-direction: row;">
							<view v-for="(col, colI) in row" :key="colI">
								<view v-if="col.isBlack" style="width: 8rpx; height: 8rpx; background-color: black;">
									<!-- 黑色码点 -->
								</view>
								<view v-else style="width: 8rpx; height: 8rpx; background-color: white;">
									<!-- 白色码点 -->
								</view>
							</view>
						</view>
					</view>

				<!-- 	<view style="width: 210rpx;font-family: PingFang SC;font-weight: 500;font-size: 60rpx;color: #18288F;
					height: 45rpx; margin: 37rpx 135rpx 94rpx 135rpx;">{{ orderDetail.pickup_code }}</view> -->

				</u-popup>


			</view>
			<view class="address_a">
				<view class="address_a_a">
					<u-icon name="map" color="#666666" size="16"></u-icon>
				</view>
				<view class="address_a_d">
					<view class="address_a_d_a">{{orderDetail.consignee}}<span>{{orderDetail.mobile}}</span></view>
					<view class="address_a_d_b">{{orderDetail.delivery_address}}</view>
				</view>
			</view>
			<view class="index_d">
				<view class="index_d_a" v-for="(item, index) in orderDetail.order_goods" :key="index">
					<view style="overflow: hidden;" @click="goPage('/pages/goods/info?id='+item.goods_id)">
						<view class="index_d_a_a">
							<custom-image :lazy-load="true" width="140rpx" height="140rpx" radius="0" lazy-load
								:src="item.image"></custom-image>
						</view>
						<view class="index_d_a_b">
							<view class="index_d_a_b_a">{{item.goods_name}}</view>
							<view class="index_d_a_b_b">
								<view class="index_d_a_b_b_a">规格：</view>
								<view class="index_d_a_b_b_c">{{item.spec_value}}</view>
							</view>
							<view class="index_d_a_b_b">
								<view class="index_d_a_b_b_d">
									<view class="order_a_a_b_b_c_a" v-if="item.integral==0 && item.goods_price>0">
										<span>¥</span>{{item.goods_price}}
									</view>
									<view class="order_a_a_b_b_c_a" v-if="item.goods_price==0 && item.integral>0">
										<span>积分</span>{{item.integral}}
									</view>
									<view class="order_a_a_b_b_c_a" v-if="item.goods_price>0 && item.integral>0">
										<span>积分</span>{{item.integral}}+<span>¥</span>{{item.goods_price}}
									</view>
								</view>
								<view class="index_d_a_b_b_e">X{{item.goods_num}}</view>
							</view>
						</view>
					</view>
					<view class="index_d_a_d" v-if="item.after_status_desc">{{item.after_status_desc}}</view>

				</view>
				<view class="index_d_c">
					<view class="index_d_c_a">所需积分</view>
					<view class="index_d_c_b">¥{{orderDetail.total_integral}}</view>
				</view>
				<view class="index_d_c">
					<view class="index_d_c_a">运费</view>
					<view class="index_d_c_b">¥{{orderDetail.shipping_price}}</view>
				</view>
				<view class="index_d_d">
					<view class="index_d_d_b">
						<view class="order_a_a_b_b_c_a"
							v-if="orderDetail.order_integral==0 && orderDetail.order_amount>0">
							<span>¥</span>{{orderDetail.order_amount}}
						</view>
						<view class="order_a_a_b_b_c_a"
							v-if="orderDetail.order_amount==0 && orderDetail.order_integral>0">
							<span>积分</span>{{orderDetail.order_integral}}
						</view>
						<view class="order_a_a_b_b_c_a"
							v-if="orderDetail.order_amount>0 && orderDetail.order_integral>0">
							<span>积分</span>{{orderDetail.order_integral}}+<span>¥</span>{{orderDetail.order_amount}}
						</view>
					</view>

				</view>
			</view>
			<view class="index_d" style="margin-top: 20rpx;">
				<view class="confirm_order_a">
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">订单编号</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">{{orderDetail.order_sn}}
						</view>
					</view>
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">下单时间</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">
							{{orderDetail.create_time}}</view>
					</view>
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">付款方式</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">积分</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderDetail.order_status==2 ||orderDetail.order_status==3">
						<view class="confirm_order_a_a_a">发货时间</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">
							{{orderDetail.shipping_time}}</view>
					</view>
					<view class="confirm_order_a_a"
						v-if="(orderDetail.order_status==2 ||orderDetail.order_status==3) && !delivery_info.shipping_name">
						<view class="confirm_order_a_a_a">物流方式</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">无需物流</view>
					</view>
					<view class="confirm_order_a_a"
						v-if="(orderDetail.order_status==2 ||orderDetail.order_status==3) && delivery_info.shipping_name">
						<view class="confirm_order_a_a_a">物流公司</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">
							{{delivery_info.shipping_name}}</view>
					</view>
					<view class="confirm_order_a_a"
						v-if="(orderDetail.order_status==2 ||orderDetail.order_status==3) && delivery_info.shipping_name">
						<view class="confirm_order_a_a_a">物流单号</view>
						<view class="confirm_order_a_a_b" style="width: 530rpx; float: right;">
							{{delivery_info && delivery_info.invoice_no}}</view>
					</view>
				</view>
			</view>
			<view style="width: 750rpx;height: 150rpx;"></view>
			<view class="user_money_log_b_c" v-if="orderDetail.order_status!=4">
				<view class="user_money_log_b_c_b" v-if="orderDetail.order_status==2" @click="order_confirm_click()">
					确认收货</view>
				<!-- 				<view class="user_money_log_b_c_b" v-if="orderDetail.order_status==0" @click="goPage('/pages/confirm_order/order_details?order_sn='+orderDetail.order_sn)" style="background-color: #fff;border:1rpx solid #3DB18A;color:#3DB18A;">付款</view>
				<view class="user_money_log_b_c_b" v-if="orderDetail.order_status==0" @click="order_cancel_click()" style="margin-right: 15rpx; background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">取消订单</view>
				<view class="user_money_log_b_c_b" v-if="orderDetail.order_status==1" @click="order_cancel_click()" style="background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">取消订单</view> -->
				<!-- <view class="user_money_log_b_c_b" v-if="delivery_info && delivery_info.invoice_no"
					@click="goPage('/pages/order_details/goods_logistics?order_sn='+orderDetail.order_sn)"
					style="margin-right: 15rpx; background-color: #fff;border:1rpx solid #DCDCDC;color:#666666;">查看物流
				</view> -->
			</view>
		</view>
	</view>
</template>
<script>
	import request from '@/common/request.js';
	import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	
	import {
		loadingType
	} from '@/utils/type';
	export default {
		data() {
			return {
				showLoading: true,
				o_dz_dingwei: request.baseUrl_img + '/img/o_dz_dingwei.png',
				gengduo_icon: request.baseUrl_img + '/img/gengduo_icon.png',
				timeData: {},
				orderDetail: [],
				delivery_info: [],
				order_sn: 0,
				uid: 0,
				show: false,
				 modules: []
			}
		},
		
		onLoad: function(options) {
			this.order_sn = options.order_sn;
			this.id = options.id;
		},
		onShow() {
			this.uid = uni.getStorageSync('uid');
			let _this = this;
			this.getOrderDetailFun().then(() => {
				const qr = new UQRCode();
									
									// 二维码回调
									// http://localhost:8000/o-order_write_off_confirm+''
				// qr.data = _this.orderDetail.selffetch_shop_id +'&' +_this.orderDetail.id;
				qr.data = 'H'+_this.uid+'&' +_this.orderDetail.id;
				console.log("扫描",_this.orderDetail,"qr.data为",qr.data)
				qr.make();
				_this.modules = qr.modules;
			});
			
			
		},
		methods: {
			order_confirm_click() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '您确认该订单已收到商品吗？',
					success: function(res) {
						if (res.confirm) {
							_this.order_confirm_post();
						}
					}
				});
			},
			order_confirm_post() {
				let paramsList = {
					uid: this.uid,
					order_id: this.orderDetail.id,
				}
				let optsList = {
					url: 'o-order_confirm',
					method: 'post'
				};
				uni.showLoading({
					title: '确认中',
					mask: true
				})
				let _this = this;
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.$emit("refreshorder")
						_this.getOrderDetailFun();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			order_cancel_click() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '您确认取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							_this.order_cancel_post();
						}
					}
				});
			},

			order_cancel_post() {
				let paramsList = {
					uid: this.uid,
					order_id: this.orderDetail.id,
				}
				let optsList = {
					url: 'o-order_cancel',
					method: 'post'
				};
				uni.showLoading({
					title: '取消中',
					mask: true
				})
				let _this = this;
				request.httpTokenRequest(optsList, paramsList).then(res => {
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.$emit("refreshorder")
						_this.getOrderDetailFun();
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			onDownChange(e) {
				this.timeData = e
			},
			countDownFinish() {
				this.order_cancel_post();
			},
			goPage(url) {
				if (!this.$util.isLogin()) {
					return;
				}
				uni.navigateTo({
					url
				});
			},
			getOrderDetailFun() {
				let paramsList = {
					uid: this.uid,
					id: this.id
				}
				let optsList = {
					url: 'o-detail',
					method: 'get'
				};
				let _this = this;
				return request.httpTokenRequest(optsList, paramsList).then(res => {
					if (res.data.code == 200) {
						console.log("得到状态码", res.data.data)
						_this.orderDetail = res.data.data;
						_this.delivery_info = _this.orderDetail.delivery;
					} else {
						setTimeout(() => uni.navigateBack(), 1500);
						return;
					}
					this.showLoading = false;
				});
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_money_log_b_c {
		width: 750rpx;
		height: 110rpx;
		line-height: 110rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		padding: 0 45rpx;
	}

	.user_money_log_b_c_b {
		width: 200rpx;
		height: 70rpx;
		background: #182791;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 65rpx;
		text-align: center;
		float: right;
		// border: 2rpx solid #3DB18A;
		margin-top: 20rpx;
	}

	.order_bb {
		width: 750rpx;
		height: 104rpx;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
	}

	.order_bb_a {
		padding: 12rpx 30rpx;
		overflow: hidden;
	}

	.order_bb_a_a {
		width: 50%;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx 0px 0px 40rpx;
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.order_bb_a_b {
		width: 50%;
		height: 80rpx;
		background: #FA7428;
		opacity: 0.5;
		border-radius: 0px 40rpx 40rpx 0px;
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.order_bb_a_c {
		width: 326rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #FA7428;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
		float: left;
	}

	.order_bb_a_d {
		width: 326rpx;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		float: left;
		margin-left: 40rpx;
	}

	.order_bb_a_e {
		width: 690rpx;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.address_a {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		background: #FFFFFF;
		padding: 33rpx 23rpx;
		margin: auto;
		margin-bottom: 20rpx;
	}

	.address_a_a {
		width: 50rpx;
		height: 50rpx;
		float: left;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 40rpx;
		border-radius: 50%;
	}

	.address_a_b {
		float: left;
		margin-left: 25rpx;
		width: 490rpx;
	}

	.address_a_b_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 16rpx;
	}

	.address_a_b_b {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.address_a_c {
		float: right;
		background-position: right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
		height: 111rpx;
		width: 20rpx;
	}

	.address_a_d {
		overflow: hidden;
		width: 500rpx;
		float: left;
		margin-left: 10rpx;
	}

	.address_a_d_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000022;
	}

	.address_a_d_a span {
		margin-left: 20rpx;
	}

	.address_a_d_b {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.index_a {
		width: 750rpx;
		height: auto;
		background: #FFFFFF;
		padding: 50rpx 47rpx;

		// 
		display: flex;
	}

	.index_a_a {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.index_a_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.qrcodebox {
		width: 100rpx;
		height: 98rpx;
		// border: 1px solid red;
		margin: 0 0 0 395rpx;
	}


	.index_c {
		width: 750rpx;
		height: 104rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}

	.index_c_a {
		width: 702rpx;
		height: 80rpx;
		background: #FA7428;
		border-radius: 40rpx;
		margin: auto;
		margin-top: 12rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.confirm_order_a {
		width: 100%;
		height: auto;
		margin: auto;
		background: #FFFFFF;
	}

	.confirm_order_a_a {
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
	}

	.confirm_order_a_a_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		background-position: right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.confirm_order_a_a_b {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 100%;
	}

	.confirm_order_a_a_c {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.confirm_order_a_a_c_a {
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
	}

	.confirm_order_a_a_c_a_a {
		float: left;
		width: 25%;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
	}

	.confirm_order_b {
		height: 106rpx;
		line-height: 106rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 100%;
		margin: auto;
	}

	.confirm_order_b span {
		color: #FA7428;
	}

	.confirm_order_b_a {
		float: left;
		width: 33.33%;
	}

	.index_d {
		width: 710rpx;
		margin: auto;
		height: auto;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.index_d_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #353535;
	}

	.index_d_a {
		width: 100%;
		height: auto;
		padding: 30rpx 0;
		overflow: hidden;
		margin: auto;
		background: #FFFFFF;
	}

	.index_d_a_a {
		width: 140rpx;
		height: 140rpx;
		border-radius: 15rpx;
		overflow: hidden;
		float: left;
	}

	.index_d_a_b {
		width: 440rpx;
		margin-left: 30rpx;
		height: auto;
		float: left;
		position: relative;
	}

	.index_d_a_b_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		height: 40rpx;
		overflow: hidden;
		line-height: 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.index_d_a_b_b {
		margin-top: 10rpx;
		overflow: hidden;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.index_d_a_b_b_a {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
		line-height: 42rpx;
	}

	.index_d_a_b_b_b {
		float: left;
	}

	.index_d_a_b_b_d {
		float: left;
		line-height: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF6000;
	}

	.order_a_a_b_b_c_a {
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4D4F;
	}

	.order_a_a_b_b_c_a span {
		font-size: 24rpx;
	}

	.index_d_a_b_b_e {
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		line-height: 50rpx;
	}

	.index_d_a_b_b_b_a {
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FA7428;
	}

	.index_d_a_b_b_c {
		float: left;
		margin-left: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
		overflow: hidden;
		width: 350rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.index_d_a_b_c {
		width: 44rpx;
		height: 44rpx;
		background: #E5E5E5;
		border-radius: 50%;
		position: absolute;
		right: 0rpx;
		top: 68rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 21rpx 15rpx;
	}

	.index_d_a_c {
		width: 160rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3DB18A;
		text-align: center;
		line-height: 70rpx;
		float: right;
		margin-top: 20rpx;
	}

	.index_d_a_d {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6000;
		text-align: right;
	}

	.index_d_c {
		height: 80rpx;
		line-height: 80rpx;
	}

	.index_d_c_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		float: left;
	}

	.index_d_c_b {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		float: right;
	}

	.index_d_d {
		height: 100rpx;
		line-height: 100rpx;
	}

	.index_d_d_a {
		float: right;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.index_d_d_b {
		float: right;
		font-size: 47rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6000;
	}
</style>